<template>
	<div class="basic_wrap">
		<div class="back_left" @click="$router.back()">
			<img src="../img/common/back_b.png">
		</div>
    <div class="logoWrap">
      <img src="@/assets/img/logo.png" class="logoImg">
    </div>
		<div class="form_div">
      <div v-if="!config.register_phone" class="item">
        <input v-model.trim="data.username" type="text" class="inp" :placeholder="$t('login.username')">
      </div>
      <div v-if="config.register_phone" class="item">
        <input v-model.trim="data.username" type="number" class="inp" :placeholder="$t('login.phone')">
      </div>
      <div class="item">
        <input v-model.trim="data.password" :type="password" class="inp" :placeholder="$t('login.password')">
        <div class="eye_bi" :class="password == 'text' ? 'eye' : ''" @click="showPwd" />
      </div>
      <div class="item">
        <input v-model.trim="data.code" type="text" class="inp" :placeholder="$t('login.code')">
        <img style="height: 32px;" :src="verify_img" @click="getVerifyCode()">
      </div>
      <!--				<div class="register_btn"-->
      <!--					 :class="data.username == '' || data.password == '' || data.code == ''? 'no_touch' : ''" @click="submit">-->
      <!--					→-->
      <!--				</div>-->
		</div>
    <div class="loginBtn">
      <div class="btn" @click="submit">登录</div>
    </div>
		<div class="login_register">
			<router-link to="/register">
				<div>
					去注册
				</div>
			</router-link>
		</div>
		<div class="kefu" :class="show_kefu ? '' : 'kefu_hide'" @click="kefu_to">
			<img class="kefu_img" src="../img/index/kefu.png">
		</div>
    <div class="appWrap" v-if="showDownApp()">
      <div class="abtn" @click="jump">
        <img src="@/assets/img/downA.png" style="width: 16px;height: 16px">
        <div>下载APP</div>
      </div>
    </div>
	</div>
</template>

<script>
	import Vue from "vue";
	import bsHeader from '../../components/bsHeader.vue'
	import {
		CountDown,
		Checkbox,
		Dialog
	} from "vant";
	import Fetch from "../../utils/fetch";

	Vue.use(CountDown)
		.use(Checkbox)
		.use(Dialog);

	export default {
		name: "login",
		components: {
			bsHeader
		},
		data() {
			return {
				language_logo: localStorage.getItem('language_logo'),
				show_kefu: false,
				password: "password",
				loading: false,
				data: {
					username: "",
					password: "",
					code: "",
				},
				config: {
					register_phone: 1
				},
				verify_img: "",
			};
		},
		created() {
			if (window.plus) {
				plus.navigator.setStatusBarBackground('#FAFAFA');
				plus.navigator.setStatusBarStyle('dark');
			}
			this.$parent.footer("user", false);
		},

		mounted() {
			// if (this.$route.query.agent) {
			// 	localStorage.setItem('agent', this.$route.query.agent);
			// 	this.data.agent = this.$route.query.agent;
			// } else {
			// 	if (localStorage.getItem('agent')) {
			// 		this.data.agent = localStorage.getItem('agent');
			// 	}
			// }
			var that = this;
			document.body.addEventListener(
				"scroll",
				function() {
					if (!that.show_kefu) {
						return;
					}
					that.show_kefu = false;
				},
				false
			);
			document.addEventListener(
				"click",
				function(ev) {
					if (ev.target.className != "kefu_img") {
						that.show_kefu = false;
					}
				},
				false
			);
			this.start();
			this.getVerifyCode();
		},
		methods: {
      showDownApp(){
        try {
          if(AppInterface.version()){
            return false
          }
        }catch (e) {
          return true
        }
      },
      jump() {
        Fetch('/index/int').then((r) => {
          if(r.code == 1){
            let url = r.data.version.url
            if (url.indexOf('http') == 0) {
              window.open(url);
            } else {
              this.$router.push(url);
            }
          }
        })
      },
			start() {
				Fetch("/index/getWebInfo").then((r) => {
					this.config = r.data;
				});
			},
			kefu_to() {
				if (this.show_kefu) {
          const currentTime = new Date();
          const currentHour = currentTime.getHours();
          const currentMinute = currentTime.getMinutes();
          if (
              (currentHour === 9 && currentMinute >= 0) ||
              (currentHour > 9 && currentHour < 23) ||
              (currentHour === 23 && currentMinute === 0)
          ) {
            Fetch('/index/service_list').then(res => {
              if(res.data && res.data.list.length > 0){
                this.$router.push('/service/' + res.data.list[0].id);
              }
            })
          } else {
            this.$toast('客服服务时间早上9点--晚上11点');
          }
				}
				this.show_kefu = !this.show_kefu;
			},
			showPwd() {
				if (this.password == "password") {
					this.password = "text";
				} else {
					this.password = "password";
				}
			},
			submit() {
				if (this.loading) {
					return false;
				}
				//数字、字母或下划线
				var reg1 = /^[0-9a-zA-Z_]{1,}$/;
				//非手机号注册判断
				if (!this.config.register_phone) {
					if (!this.data.username) {
						this.$toast(this.$t('login.usernameEmpty'));
						return false;
					}
					if (!reg1.test(this.data.username)) {
						this.$toast(this.$t('login.usernameLimit'));
						return false;
					}
					if (this.data.username.length > 16 || this.data.username.length < 4) {
						this.$toast(this.$t('login.usernameLength'));
						return false;
					}
				}
				//手机号注册判断
				else {
					if (!this.data.username) {
						this.$toast(this.$t('auth.phoneEmpty'));
						return false;
					}
					if (this.data.username.length < 6 || this.data.username.length > 16) {
						this.$toast(this.$t('auth.phoneError'));
						return;
					}
				}
				
				if (!this.data.password) {
					this.$toast(this.$t('login.passwordEmpty'));
					return false;
				}
				if (!reg1.test(this.data.password)) {
					this.$toast(this.$t('login.passwordLimit'));
					return false;
				}
				if (this.data.password.length > 16 || this.data.password.length < 6) {
					this.$toast(this.$t('login.passwordLength'));
					return false;
				}
				if (!this.data.code) {
					this.$toast(this.$t('login.codeEmpty'));
					return false;
				}
				this.loading = true;
				Fetch("/index/login", {
					...this.data,
				}).then((res) => {
					if (res.data.token) {
						localStorage.setItem('token', res.data.token);
					}
					this.$toast(this.$t('login.loginSuccess'));
					this.$router.replace("/");
				}).catch((res) => {
					this.getVerifyCode();
					this.loading = false;
				});
			},
			getVerifyCode() {
				Fetch("/index/captcha").then((r) => {
					this.verify_img = r.data.image;
				});
			}
		},
	};
</script>

<style lang="less" scoped>
	.basic_wrap{
    background-image: url(../../assets/img/otherBac.png);
    background-size: cover;
    background-position: center top;
    min-height: 100vh;
    position: relative;
	}
  .logoWrap{
    display: flex;
    justify-content: center;
    margin-top: 90px;
    margin-bottom: 75px;
     .logoImg{
       width: 22.4vw;
       height: 22.4vw;
     }
  }
	.form_div {
     margin: 0 34px;
	}
  .loginBtn{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 76px;
    .btn{
      width: 77vw;
      height: 40px;
      background: linear-gradient(90deg, #018DFF 0%, #0039FF 100%);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      font-size: 16px;
    }
  }
  .login_register{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
    color: #A3A3A3;
    font-size: 16px;
  }
  .appWrap{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
    .abtn{
      width: 195px;
      height: 40px;
      background: linear-gradient(90deg, #018DFF 0%, #0039FF 100%);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      font-size: 16px;
    }
  }
	.back_left {
		background: unset;
		img {
			width: 20px;
			position: fixed;
			top: 10px;
			left: 10px;
		}
	}
	.language {
		position: absolute;
		top: 6px;
		right: 6px;
		height: 30px;
		z-index: 11;

		img {
			height: 100%;
		}
	}

	.logo {
		margin: 50px 0 0 30px;

		img {
			height: 80px;
		}
	}

	.item {
		height: 40px;
		font-size: 14px;
		display: flex;
    align-items: center;
		background: #F3FCFF;
		border-radius: 8px;
		padding: 0 15px;
    margin-bottom: 16px;
		input {
			height: 40px;
			flex: 1;
      color: #A3A3A3;
		}
		.eye_bi {

		}
	}
</style>
